<form nz-form nzLayout="vertical" [formGroup]="validateForm" (ngSubmit)="submitForm()">
  <nz-form-item>
    <nz-form-label [nzNoColon]="false">
      {{ l('BasicArchives::UI:UniqueCodeSetting.ModelTitle.AutoCode') }}
    </nz-form-label>
    <nz-form-control nzHasFeedback>
      <nz-switch 
        formControlName="autoCode" 
        [nzCheckedChildren]="l('BasicArchives::UI:UniqueCodeSetting.ModelTitle.AutoCode.True')" 
        [nzUnCheckedChildren]="l('BasicArchives::UI:UniqueCodeSetting.ModelTitle.AutoCode.False')"
      ></nz-switch>
    </nz-form-control>
  </nz-form-item>
  <nz-form-item>
    <nz-form-label>
      {{ l('BasicArchives::UI:UniqueCodeSetting.ModelTitle.SegmentConfigrations') }}
    </nz-form-label>
    <nz-form-control nzHasFeedback>
      <nz-card>
        <nz-table
          #basicTable
          nzSize="middle"
          [nzData]="tableData"
          [nzTotal]="tableData.length"
          [nzScroll]="{ x: '100%', y: '200px' }"
          [nzShowPagination]="false"
        >
          <thead>
            <tr>
              <th nzWidth="160px">{{ l('BasicArchives::UI:UniqueCodeSetting.ModelTitle.SegmentConfigrations.TableColumn.SegmentType') }}</th>
              <th>{{ l('BasicArchives::UI:UniqueCodeSetting.ModelTitle.SegmentConfigrations.TableColumn.Configration') }}</th>
              <th nzWidth="80px">{{ l('BasicArchives::UI:UniqueCodeSetting.ModelTitle.SegmentConfigrations.TableColumn.Operate') }}</th>
            </tr>
          </thead>
          <tbody>
            <tr *ngFor="let segmentConfigrationControl of tableData; let i = index">
              <td>
                <a (click)="editSegmentConfigration(i)">
                  {{ getSegmentTypeDisplayName(segmentConfigrationControl.value.key) }}
                </a>
              </td>
              <td>
                <span 
                  nz-tooltip 
                  [nzTooltipTitle]="segmentConfigrationControl.value.configration"
                  class="table-cell-content"
                >
                  {{ segmentConfigrationControl.value.configration }}
                </span>
              </td>
              <td>
                <a (click)="deleteSegmentConfigration(i)">{{ l('BasicArchives::UI:UniqueCodeSetting.ModelTitle.SegmentConfigrations.Button.Delete') }}</a>
              </td>
            </tr>
          </tbody>
        </nz-table>
        <button nz-button nzBlock nzType="dashed" type="button" (click)="addSegmentConfigration()">
          {{ l('BasicArchives::UI:UniqueCodeSetting.ModelTitle.SegmentConfigrations.Button.Add') }}
        </button>
      </nz-card>
    </nz-form-control>
  </nz-form-item>
</form>

<div class="modal-footer">
  <button nz-button nzType="primary" [disabled]="!validateForm.valid || !isFormChanged" (click)="submitForm()">
    {{ l('BasicArchives::UI:UniqueCodeSetting.Button.Save') }}
  </button>
  <button nz-button type="button" (click)="cancel()">{{ l('BasicArchives::UI:UniqueCodeSetting.Button.Close') }}</button>
</div>